<template>
  <div class="rigister">
    <div class="close">
      <img :src="ImgSrc">
    </div>
    <form class="form">
      <div>
        <h2>穿云箭</h2>
        <p>一只穿云箭，千军万马来相见</p>
      </div>
      <!--验证码-->
      <div class="user" @click="inputTextFocus" :style="border12">
        <label for="rightCode"><img :src="user"></label>
        <input id="rightCode" type="text" placeholder="请输入右侧验证码" v-model="rerifyCode">
        <span>验证码</span>
      </div>
      <!--邮箱-->
      <div class="user" @click="inputTextFocus" :style="border12">
        <label for="user"><img :src="user"></label>
        <input id="user" type="email" placeholder="邮箱" v-model="userEmail">
      </div>
      <!--邮箱验证码-->
      <div class="user" @click="inputTextFocus" :style="border12">
        <label for="emailCode"><img :src="user"></label>
        <input id="emailCode" type="text" placeholder="请输入邮箱验证码" v-model="emailCode">
        <span>获取</span>
      </div>
      <!--密码-->
      <div class="password" @click="inputTextFocus1" :style="border11">
        <label for="psw"><img :src="pwd"></label>
        <input id="psw" type="password" placeholder="请输入密码" v-model="userPWD">
      </div>
      <!--邀请码-->
      <div class="user" @click="inputTextFocus" :style="border12">
        <label for="request"><img :src="user"></label>
        <input id="request" type="text" placeholder="请输入邀请码" v-model="requestCode">
      </div>
      <div>
        <button @click="popupR">注册</button>
      </div>
    </form>
  </div>
</template>
<script>
  import imgLogo from '../../assets/LOGO_color.png'
  import userImg from '../../assets/icon_user_sign.png'
  import userImg1 from '../../assets/icon_user_sign_mark.png'
  import pwdImg from '../../assets/icon_password_sign.png'
  import pwdImg1 from '../../assets/icon_password_sign_mark.png'
  export default{
    data (){
      return{
        ImgSrc:imgLogo,
        user:userImg,
        pwd:pwdImg,
        border12:{
          borderBottomColor:''
        },
        border11:{
          borderBottomColor:''
        },
        userEmail:'',
        userPWD:'',
        //验证码
        rerifyCode:'',
        //邮箱验证码
        emailCode:'',
        //邀请码
        requestCode:''

      }
    },
    //方法
    methods:{
      popupR:function () {
        this.$emit('listenLogin',false);
      },
      //点击用户名
      inputTextFocus:function () {
        //触发函数时改变border颜色
        this.$set(this.border12,'borderBottomColor','#FF7A3F');
        this.$set(this.border11,'borderBottomColor','#7B8080');
      },
      //点击输入密码
      inputTextFocus1:function(){
        this.$set(this.border11,'borderBottomColor','#FF7A3F');
        this.$set(this.border12,'borderBottomColor','#7B8080');
      }
    },
    //实例建立后执行
    mounthed:{

    }
  }

</script>
<style scoped>
  div h2{
    margin: 0;
    padding: 0;
  }
  img{
    max-height: 100%;
    max-width:100%
  }
  input{
    border: 0;
    text-indent: 1rem;
    outline:none
  }

  .rigister{
    position: fixed;
    top:50%;
    left: 50%;
    height: 580px;
    width: 400px;
    margin-left: -200px;
    margin-top: -290px;
    z-index: 9999;
    overflow: hidden;
    font-size: 0;
  }
  .close{
    margin:0 auto;
    width: 100px;
    height: 50px;
    background-color: #ffffff;
    border-radius: 100px 100px 0 0;
  }
  .close img{
    margin-top: 20px;
  }
  form{
    text-align: center;
    background-color: #ffffff;
    padding-top: 10px;
    margin: 0;
  }
  form div{
    padding: 15px 0px 10px 5px;
  }
  h2{
    font-size: 1.0rem;
    font-weight: 100;
    color:#FF7A3F;
  }
  p{
    font-size: 0.7rem;
    font-weight: 100;
    color:#FF7A3F;
    padding: 20px 0 10px;
  }
  .form .user{
    margin: auto;
    border-bottom: 1px solid #7B8080;
    width: 250px;
    text-align: left;
  }
  .form .password{
    margin: 20px auto;
    border-bottom: 1px solid #7B8080;
    width: 250px;
    text-align: left;
  }
  .form .password span{
    font-size: 0.7rem;
    text-align: right;
    cursor: pointer;
  }
  .form .password span:hover{
    color:#FF7A3F;
  }
  .form button{
    width: 250px;
    height: 2rem;
    background-color: #FF7A3F;
    color: #ffffff;
    border: 0;
    margin: 0 0 100px 0 ;
  }
  .form button:hover{
    background-color: red;
    cursor: pointer;
  }
</style>
